<template>
	<!-- 首页 -->
	<view class="top">
		<!-- 顶部导航栏 -->
		<view class="nav" style="background: rgba(255,255,255,0.4);">
			<view class="nav-icon1">
				<image src="../../static/shouma.png" mode="widthFix" style="width: 50rpx;"></image>
			</view>
			<view class="nav-search color4" @tap="searchs">
				<view>
					<image src="../../static/sous.png" mode="widthFix"
						style="width: 40rpx; margin-top: 10rpx; margin-right: 10rpx;"></image>
					<text>请搜索宝贝名称</text>
				</view>
			</view>
			<view class="nav-icon1">
				<image src="../../static/qip.png" mode="widthFix" style="width: 60rpx;"></image>
			</view>
		</view>
		<view class="box1">
			<!-- 轮播图 -->
			<swiper autoplay="true" circular="true" @change="topSwiperTab" style="height: 434rpx;" >
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item>
						<view class="baner" :style="';background-image: linear-gradient('+ item.color +',#FFFFFF);'" @click="Carousel(item,index)">
							<image :src="item.imgUrl" mode="widthFix" class="baner-image"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 轮播图的下表1/3 -->
			<view class="subscript">
				{{topSwiperIndex+1}} 
				 / 
				 {{banner.length}}
			</view>
			<view class="huanq">
				<!-- 环球狗粮 -->
				<view class="xhuan" v-for="(item,index) in Globaldogfood" :key="index" @click="staico(item,index)">
					<image :src="item.imgUrl"  mode="widthFix" class="img_1"></image>
					<view class="wenzi_1">{{item.title}}</view>
				</view>
			</view>
			<view class="bhangq">
				<view class="img_2">
					<image src="../../static/h1.png" class="img_3"></image>
				</view>
				<view class="wengzi_2">
					<text style="width: 100%; display: inline-block; margin-top: 27rpx;">橱窗推荐</text>
					<text style="font-size: 28rpx; color: #C0C0C0;">Shop Window</text>
				</view>
			</view>
			<swiper style="height: 600rpx; background-color: #FFFFFF;">
				<block v-for="(item,index) in zhojiand.length/2" :key="index">
					<swiper-item>
						<view class="qbu">
							<view class="jingp">
								<view class="leftd" @click="commodity(index)">
									<view class="tupian_1">
										<image :src="zhojiand[index*2].spuImg" class="img_4"></image>
									</view>
									<view class="syyjsq">
										<text style="width: 100%; display: inline-block; margin-left: 20rpx;">{{zhojiand[index*2].spuTitle}}</text>
										<text style="width: 100%; display: inline-block; color: red;margin-left: 20rpx;">￥{{zhojiand[index*2].spuPrice / 100}}<text style="font-size: 28rpx; color: #A4A7AC; text-decoration: line-through;">￥{{zhojiand[index*2].spuOriginalPrice /100}}</text></text>
										<text style="width: 100%; display: inline-block;font-size: 28rpx;margin-left: 20rpx;">累计销售:{{zhojiand[index*2].spuSales}}件</text>
									</view>
								</view>
								<view class="rightd" @click="commodity2(index)">
									<view class="Gougouwengzi">
										<text style="width: 100%; display: inline-block; margin-left: 20rpx;" class="text-ellipsis">{{zhojiand[index*2+1].spuTitle}}</text>
										<text style="width: 100%; display: inline-block; margin-left: 20rpx; color: red;">￥{{zhojiand[index*2+1].spuPrice / 100}}<text style="font-size: 28rpx; color: #A4A7AC; text-decoration: line-through;">￥{{zhojiand[index*2+1].spuOriginalPrice/100}}</text></text>
										<text style="width: 100%; display: inline-block; margin-left: 20rpx; font-size: 28rpx;">累计销售:{{zhojiand[index*2+1].spuSales}}件</text>
									</view>
									<view class="tupian_2">
										<view>
											<image :src="zhojiand[index*2+1].spuImg" class="img_5"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 分类精选 -->
			<view class="bhangq">
				<view class="img_2">
					<image src="../../static/h1.png" class="img_3"></image>
				</view>
				<view class="wengzi_2" style="width: 500rpx;">
					<text style="width: 100%; display: inline-block; margin-top: 27rpx;">分类精选</text>
					<text style="font-size: 28rpx; color: #C0C0C0; width: 100%; display: inline-block;">Competitive Products For You</text>
				</view>
			</view>
			<!-- 分类精选内容 -->
			<view class="Dog" :style="';background-image: linear-gradient('+ tyi[0].color +',#FFFFFF);'" v-for="(item,index) in tyi" :key='index'>
				<view class="tupian_3" @click="Classified(item,index)">
					<image :src="item.imgUrl" class="img_6"></image>
					<view class="liqu">
						<view class="liqu_1">
							<view class="images">
								<view class="top1">
									<image :src="item.data[0].img" class="img_7"></image>
								</view>
								<view class="wengzi_1">
									<text style="width: 100%; display: inline-block;" class="text-ellipsis">{{item.data[0].title}}</text>
									<text style="width: 100%; display: inline-block;color: red;">￥{{item.data[0].price / 100}}</text>
								</view>
							</view>
							<view class="goods-all"  @click="Viewall(item,index)">
								<text>查看全部</text>
								<text>More+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="Dog_2" :style="';background-image: linear-gradient('+ tyi[1].color +',#FFFFFF);'">
				<view class="tupian_3" >
					<image :src="tyi[1].imgUrl" class="img_6"></image>
					<view class="liqu">
						<view class="liqu_1">
							<view class="images">
								<view class="top1">
									<image :src="tyi[1].data[0].img" class="img_7"></image>
								</view>
								<view class="wengzi_1">
									<text style="width: 100%; display: inline-block;" class="text-ellipsis">{{tyi[1].data[0].title}}</text>
									<text style="width: 100%; display: inline-block;color: red;">￥{{tyi[1].data[0].price / 100}}</text>
								</view>
							</view>
							<view class="goods-all">
								<text>查看全部</text>
								<text>More+</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="buttomd">
				<view class="bhangq">
					<view class="img_2">
						<image src="../../static/h1.png" class="img_3"></image>
					</view>
					<view class="wengzi_2">
						<text style="width: 100%; display: inline-block; margin-top: 27rpx;">热销宝贝</text>
						<text style="font-size: 28rpx; color: #C0C0C0;">Hot Sale</text>
					</view>
				</view>
				<view class="xuanrhang">
					<view class="hezi_1" v-for="(item,index) in dibushuju" :key="index" @click="Hotsellingbaby(item)">
						<view class="tipian_2">
							<image :src="item.img" class="img_8"></image>
						</view>
						<view class="wengzi_3">
							<text style="width: 100%; display: inline-block;" class="text-ellipsis">{{item.title}}</text>
							<text style="width: 100%; display: inline-block; color: red;">￥{{item.price / 100}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view  style="z-index: 9999;"> -->
		        <!-- 横向滚动条 -->
			<!-- <view class="uni-padding-wrap uni-common-mt">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="100%" @scrolltolower="scrolltolower">
					<view class="scroll-view-item_H uni-bg-red">A</view>
					<view class="scroll-view-item_H uni-bg-green">B</view>
					<view class="scroll-view-item_H uni-bg-blue">C</view>
				</scroll-view>
			</view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topSwiperIndex: 0,//轮播图的下表1/3
				banner: [],//轮播图数组
				Globaldogfood:[],//环球狗粮
				dibushuju:[],//热销宝贝
				zhojiand:[],//橱窗推荐
				tyi:[],//分类精选
				// page:0
			}
		},
		onLoad(){
			// let  a = getApp().globalData.text
			// console.log('rwerasrg',a)
			this.indexsd();//实时刷新
		},
		methods: {
			// scroll(event) {
				//距离么个边界距离
				// console.log(event.detail)
			// },
			//滚动到底部/右边触发
			// scrolltolower() {
			// 	console.log(1111);
			// },
			// scrolltoupper() {
			// 	console.log(2222);
			// },
			
			
			topSwiperTab(e) {//轮播图
				// console.log(e)
				this.topSwiperIndex = Number(e.target.current);//1/3了轮播图的下表
			},
			Carousel(item,index){//轮播图
				console.log(item,index)
				let sub = item.url.substr(24,7)//截取
				let str = item.url.substr(25,7)//截取
				if (item.url.length == 32) {//判断
					uni.navigateTo({
						url: '/pages/details/producte?page=' +JSON.stringify(str)//轮播图跳转把截取下来的赋的值传过去
					})
				} else{
					uni.navigateTo({
						url: '/pages/product/list?pages=' +JSON.stringify(sub)//轮播图跳转把截取下来的赋的值传过去
					})
				}
			},
			indexsd(){
				uni.request({
					url:'http://192.168.1.54:8081/m.api',
					data:{
						"_gp":"integral",
						"_mt":"getIndexData" 
					},
					header:{
						"access_token":undefined
					},
					success:(res)=>{
						console.log(res)
						this.banner = res.data.data.advertisement.t1//轮播图数组
						this.Globaldogfood = res.data.data.advertisement.t4//环球狗粮
						this.tyi = res.data.data.advertisement.t2//分类精选
						this.zhojiand = res.data.data.windowRecommend//橱窗推荐
						this.dibushuju= res.data.data.salesTop//热销宝贝
						// console.log(this.dibushuju,"456+564654654")
					}
				})
			},
			searchs(){
				uni.navigateTo({
					url: '/pages/searchs/searchs'//点击搜索跳转过去搜索
				});
			},
			// 环球狗粮
			staico(item,index){
				// let sub = item.url.substr(24,7)
				uni.navigateTo({
					url: `${item.url}`//跳转的商品列表、还有一个团购
				})
				console.log(item.url)
			},
			
			commodity(index){
				uni.navigateTo({
					url: '/pages/details/producte?id=' +JSON.stringify(this.zhojiand[index+index].spuId)//跳转到详情
				})
			},
			commodity2(index){
				uni.navigateTo({
					url:'/pages/details/producte?id=' +JSON.stringify(this.zhojiand[index+index+1].spuId)//跳转到详情
				})
			},
			// 分类精选
			Classified(item,index){
				let id = item.data[0].id//这个是传个id过去
				uni.navigateTo({
					url: '/pages/details/producte?id=' +JSON.stringify(id)//跳转的详情页面
				})
			},
			// 查看全部
			Viewall(item,index){
				let sub = item.url.substr(24,7)
				uni.navigateTo({
					url: '/pages/product/list?iid=' +JSON.stringify(sub)//跳转到商品列表页面无头的
				})
			},
			// 详情页面
			Hotsellingbaby(item){
				console.log(item)
				uni.navigateTo({
					url: '/pages/details/producte?id=' +JSON.stringify(item.id)
				})
			},
		}
	}
</script>

<style scoped ="scoped">
	.scroll-view_H {
	     white-space: nowrap;
	}
	.scroll-view-item_H {
	    display: inline-block;
	    width: 100%;
	    height: 100px;
	}
	.uni-bg-red {
	    background: red;
	}
	
	.uni-bg-green {
	    background: green;
	}
	.uni-bg-blue {
	    background: blue;
	}
	
	.top{width: 100%; background-color: #F2F1F1;}
	/* 顶部导航栏 */
	.nav {width: 750rpx;height: 94rpx;text-align: center;position: fixed;top: 0rpx;z-index: 1;display: flex;justify-content: space-between;}
	.nav-search {width: 500rpx;height: 60rpx;padding: 17rpx 25rpx;font-size: 30rpx;}
	.nav-search>view {width: 500rpx;height: 60rpx;line-height: 60rpx;margin: auto;border-radius: 30rpx;background-color: #EEEEEE;display: flex;justify-content: center;}
	.nav-icon1 {width: 60rpx;height: 60rpx;padding: 17rpx;}
	
	.box1 {width: 750rpx;height: 436rpx;position: relative;}
	.baner {width: 714rpx;height: 250rpx;padding-left: 20rpx;padding-right: 20rpx;padding-top: 60px;}
	.baner-image {width: 100%;border-radius: 15rpx;}
	.subscript {width: 80rpx;line-height: 40rpx;text-align: center;color: #FFFFFF;font-size: 28rpx;position: absolute;left: 50rpx;bottom: 50rpx;border-radius: 15rpx;background: rgba(0, 0, 0, 0.5);}
	.huanq{width: 100%; height: 200rpx; background-color: #FFFFFF;}
	.xhuan{width: 140rpx; height: 130rpx; float: left; margin-left:8rpx; margin-top: 33rpx;line-height: 34rpx;}
	.img_1{width: 90rpx; margin: auto; margin-left: 24rpx; }
	.wenzi_1{text-align: center; font-size: 30rpx;}
	
	/* 轮播图2 */
	.bhangq{width: 100%; height: 140rpx; background-color: #FFFFFF; display: flex; margin-top: 20rpx;}
	.img_2{width: 130rpx; height: 140rpx; background-color: #FFFFFF; margin-left: 15rpx;}
	.img_3{width: 100rpx; height: 100rpx; margin-left: 10rpx;margin-top: 15rpx;}
	.wengzi_2{width: 250rpx; height: 140rpx; background-color: #FFFFFF;}
	.Gougouwengzi{width: 100%; height: 140rpx; background: #FFFFFF;}
	.tupian_2{width: 100%; height: 460rpx; background: #FFFFFF;}
	.img_5{width: 370rpx;height: 460rpx; margin-left: -27rpx;}
	.qbu{width:  750rpx; height: 600rpx; background: #FFFFFF; display: flex;}
	.jingp{width: 750rpx; height: 600rpx; background-color: #FFFFFF; display: flex;}
	.nnaie{width: 750rpx; height: 600rpx; background-color: #FFFFFF; display: flex;}
	.leftd{width: 60%; height: 600rpx; background: #FFFFFF;}
	.tupian_1{width: 100%; height: 460rpx; background-color: #FFFFFF;}
	.img_4{width: 100%; height: 460rpx;}
	.syyjsq{width: 100%; height: 140rpx; background-color: #FFFFFF;}
	.rightd{width: 40%; height: 600rpx; background-color: #FFFFFF;}
	.text-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}/* 宽度超过子后就变成... */
	
	/* 分类精选 */
	.Dog{width: 100%;height: 550rpx;}
	.tupian_3{width: 100%; height: 310rpx; background-color: #FFFFFF;}
	.img_6{width: 100%; height: 320rpx;}
	.liqu{width: 700rpx; height: 312rpx; background-color: #FFFFFF;position: relative;margin-top: -150rpx; left: 30rpx; box-shadow: -1px -1px 4px #E3E3E4;}
	.liqu_1{width: 100%; height: 312rpx; background-color: #FFFFFF;padding: 10rpx; display: flex;}
	.images{width: 180rpx; height: 300rpx;margin-right: 20rpx;}
	.top1{width: 180rpx; height: 180rpx; }
	.wengzi_1{width: 100%; height: 118rpx; }
	.img_7{width: 100%; height: 180rpx;}
	.goods-all {width: 180rpx;height: 100rpx;line-height: 50rpx;color: #909399;font-size: 30rpx;padding: 40rpx 0rpx;text-align: center;background-color: #F3F3F3;}
	/* .Dog_2{width: 100%; height: 550rpx; margin-top: 20rpx;} */
	
	/* 底部 */
	.buttomd{width: 100%; height: 1000rpx; background-color: #FFFFFF; margin-top: 20rpx;}
	.xuanrhang{width: 711rpx; overflow: hidden; background-color: #FFFFFF; display: flex; padding: 0rpx 20rpx;justify-content: space-between; flex-wrap: wrap;}
	.hezi_1{width: 350rpx; height: 482rpx; background-color: #FFFFFF; margin: 20rpx 0rpx;}
	.tipian_2{width: 100%; height: 400rpx; background-color: #FFFFFF;}
	.wengzi_3{width: 100%; height: 82rpx; background-color: #FFFFFF;}
	.img_8{width: 100%; height: 400rpx;}
</style>